document.addEventListener("DOMContentLoaded", function () {
  const container = document.getElementById("time-line-scroller");
  container.scrollTo({
    left: container.scrollWidth,
    behavior: "smooth",
  });

  const timeLineitems = document.querySelectorAll(".time-item-line");
  const lastTimeLine = timeLineitems[timeLineitems.length -1];
  const timeLineImg = lastTimeLine.querySelector("img")
  timeLineImg.src = "../assets/image/about/time_line_circle_gf.gif";

  document.getElementById("left-arrow").addEventListener("click", function () {
    container.scrollBy({
      left: -400,
      behavior: "smooth",
    });
  });
  document.getElementById("right-arrow").addEventListener("click", function () {
    container.scrollBy({
      left: 400,
      behavior: "smooth",
    });
  });

  function animateNumber(element) {
    const target = parseInt(element.dataset.target);
    const duration = 3000; // 动画持续时间

    const startTime = performance.now();

    function update(currentTime) {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);

      // 使用缓动函数
      const easeOutQuart = 1 - Math.pow(1 - progress, 4);
      const current = Math.floor(target * easeOutQuart);

      element.textContent = current.toLocaleString();

      if (progress < 1) {
        requestAnimationFrame(update);
      }
    }

    requestAnimationFrame(update);
  }

  // 监听元素可见性
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const numberElement = entry.target.querySelector(".number");
          animateNumber(numberElement);
          observer.unobserve(entry.target);
        }
      });
    },
    {
      threshold: 0.1,
    }
  );

  // 监听所有数字容器
  document.querySelectorAll(".count-item").forEach((item) => {
    observer.observe(item);
  });
});
